<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,p,ul,li,input {margin:0;padding:0;}
        ul {list-style-type:none;}
        a {color:#fff;ouline:none;text-decoration:none;}
        body {font:700 24px/1.5 Arial;}

        #calc {position:relative;background:black;width:300px;margin:10px auto;}
        #calc p {color:#fff;text-align:right;font:12px/20px Arial;padding:0 5px;}
        #calc .f-text {border:0;width:290px;height:84px;text-align:right;font:700 50px/84px Arial;background:grey;padding:0 5px;}

        #calc ul {position:relative;overflow:hidden;zoom:1;background:#A0A0A0FF;padding:0 0 17px 8px;}
        #calc ul li{float:left;width:63px;height:41px;margin:17px 10px 0 0;}
        #calc ul li a {display:block;width:63px;height:41px;line-height:41px;text-align:center;background:black;}

        #calc ul li.btn-2 {position:absolute;top:174px;right:0;}
        #calc ul li.btn-2 a {height:99px;line-height:99px;}

        #calc ul li.btn-3 {width:136px;}
        #calc ul li.btn-3 a {width:136px;}

        #formula {position:absolute;top:20px;background:none;border:0;font:700 12px/1.5 Arial;width:280px;padding:3px 15px 0 5px;text-align:right;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oCalc = document.getElementById("calc");
            var aA = oCalc.getElementsByTagName("a");
            var aInput = oCalc.getElementsByTagName("input")[0];
            var oFormula = document.getElementById("formula");
            var s = false; /* 设置状态值控制功能按钮的功能启用/关闭 */
            /*var i = 0;*/
            /* 功能按钮 */
            for(var i=0;i<aA.length;i++) {
                aA[i].onclick = function() {
                    switch(this.innerHTML) {
                        case "c":
                            aInput.value = 0;
                            oFormula.value = "";
                            break;
                        case "%":
                            count("%");
                            break;
                        case "÷":
                            count("/");
                            break;
                        case "×":
                            count("*");
                            break;
                        case "-":
                            count("-");
                            break;
                        case "+":
                            count("+");
                            break;
                        case "=":
                        /*s若为真，则不执行符号后的表达式；若为假，再执行后续表达式*/
                            s || (oFormula.value += aInput.value);
                            aInput.value = eval(oFormula.value.replace(/\%\/\*\-\+/,''));
                            s = true;
                            break;
                        case ".":
                        /*search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。*/
                            if(aInput.value.search(/[\.\%\/\*\-\+]/) != -1)
                            break;

                        /* 匹配输入位数字的情况 */
                        default:
                        /*&&，前为真，才会执行符号后的表达式 */                        
                        /* 增加s=true的判断，代表在计算结束之后，重新输入数字的同时，实现"c"的重置功能，此处console.log(s)显示s状态变化 */
                            s && (aInput.value = 0,oFormula.value = "",s = false);

                        //  输入数字若满足小于10位，则执行后续表达式
                        //  "[",标记一个中括号表达式的开始。 ()",标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符
                        // ^[]，匹配范围从括号内的字符为开始字符
                        // (\d),数字型字符
                        // 总的意思，就是匹配  以中括号开头   的  数字字符 
                        // $1,指的是匹配规则中的第一个小括号里的小正则捕获到的内容.
                        // 如果我们将某一个按钮中的值改为字母，那么小正则只有用\D捕获到该字母，才会实现replace.
                            aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
                    }
                }
            }

            function count(a) {
                /*s为true，也就是说，至少实现一次运算时，s会冲false变为true */
                /*s=true，是为了实现当做完一次计算，需要用到该计算值参与下次计算*/
                if(s){
                    console.log(aInput.value)
                    oFormula.value = aInput.value + a;
                    aInput.value = a;
                    s = false;
                }

                /* 因为s初始为false，则在此实现连续运算，在还未给出最终答案的时候 */
                else {
                     // 符号前为假，则执行后面的表达式。   若为真，则不再执行符号后的运算 
                     // []$,表示已括号内的字符结尾
                    /[\%\/\*\-\+]$/.test(aInput.value) || (oFormula.value += aInput.value);                    
                    aInput.value = a;

                    // slice(-1):代表倒序第一位
                    // .$:没有理解此处判断有什么用，其意可以理解为：
                    /[\%\/\*\-\+]$/.test(oFormula.value) || (oFormula.value += aInput.value);
                    oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value;

                }
            }
        }
    </script>
</head>
<body>
    <div id="calc">
        <p>By - Ferris QQ:21314130</p>
        <input type="text" class="f-text" readonly="readonly" maxlength="9" value="0" />
        <ul>
            <li class="btn-1"><a href="#">c</a></li>
            <li class="btn-1"><a href="#">%</a></li>
            <li class="btn-1"><a href="#">÷</a></li>
            <li class="btn-1"><a href="#">×</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li class="btn-1"><a href="javascript:void(0)">-</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li class="btn-1"><a href="javascript:void(0)">+</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="btn-2"><a href="#">=</a></li>
            <li class="btn-3"><a href="#">0</a></li>
            <li><a href="#">.</a></li>
        </ul>
        <input type="text" id="formula" readonly="readonly" value="" />
    </div>
</body>
</html>